<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<!-- 	<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>爆款拆剪</text>
		</view> -->


		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;font-weight: 700;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;font-weight: 700;"> 热点详情</text>
		</view>
		<view class="videoCopywriting">
			<view class="flex-between">



			</view>
			<view class="margin-top_30rpx">
				{{noWhitespaceText(content[0])?noWhitespaceText(content[0]):'热点文案获取中。。。。'}}
			</view>


			<view class="flex-between-end ">
				<view class="margin-top_30rpx  flex-column" @click="aiDubbing()">
					<!-- <image class="aiDubbingImg margin-bottom_20rpx" :src="group3184" mode=""></image>
					<text>AI仿写</text> -->

				</view>

				<view class="flex-start-center">
					<button open-type="share" class="btncss">
						<!-- <view class="flex-column" style="margin-bottom: 20rpx;margin-right: 30rpx;">

							<image class="copyImg margin-left_10rpx" :src="group3228Three" mode="widthFix">
							</image>
							<text style="color: #999999;margin-top: 10rpx;color: #7200FF;">分享</text>
						</view> -->
					</button>
					<view class="flex-column" @click="paste(content[0])"
						style="margin-bottom: 20rpx;margin-right: 10rpx;">

						<image class="copyImg margin-left_10rpx" :src="group3240Three" mode="widthFix">
						</image>
						<text style="color: #999999;margin-top: 10rpx;color: #7200FF;">复制</text>
					</view>
				</view>
			</view>


		</view>

		<!-- <view class="font-weight_bold font-size_32rpx margin-top_30rpx ">
			相关推荐
		</view>
		<view class="Recommendations">
			<view class="font-overflow2">
				超越国际标准!中国电信AI大模型发布:解决九章算
				术难题超越国际标准!中国电信AI大模型发布:解决九章算
				术难题
			</view>
			<view class="flex-between margin-top_30rpx">
				<view class="">
					2025-01-25 19:03
				</view>
				<view class="flex-start-center " style="color:#999999" @click="viewDetail()">
					<text style="color: #0086FF;font-size: 28rpx;"> 查看详情</text>
					<uni-icons style="margin-top: 7rpx;" color="#0086FF" type="right" size="20"></uni-icons>

				</view>
			</view>
		</view> -->
		<view class="height80">

		</view>

		<view class="c-but flex" @click="but()">用该文案创作视频</view>

		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>标题名称</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="card margin-bottom_50rpx">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" type="text" v-model="copyTypeInfo.name"
									placeholder="请输入标题名称" />
							</view>


						</view>

					</view>

					<view class="PublishTags flex" @click="payNow()">
						确定
					</view>

				</view>

			</template>
		</sunui-popup>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				group3228Three: this.$imgs.group3228Three,
				group3240Three: this.$imgs.group3240Three,
				group3184: this.$imgs.group3184,
				navTop: '',
				materialBg: this.$imgs.violet,
				copyTypeInfo: {},
				tallySet: uni.getStorageSync('tallySet'),
				content:''


			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.copyTypeInfo = JSON.parse((decodeURIComponent(options.obj)));
			console.log(this.copyTypeInfo)

			this.$nextTick(()=>{
				setTimeout(()=>{
					this.hotspotContentFn()
				},500)
			})


			this.tallySetFn()
			this.userInfos()

			// let noWhitespaceText =this.copyTypeInfo.context.replace(/\s+/g, ' ')
			// console.log(noWhitespaceText)


		},
		computed: {
			noWhitespaceText: function() {
				return function(context) {
					return context.replace(/\s+/g, ' ')
				};
			}

		},
		methods: {

			async hotspotContentFn() {
				uni.showLoading({
					title: '分析标题中...',
					mask: true
				});
				const result = await this.$http.post({
					url: this.$api.hotspotContent,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),

						keyword: this.copyTypeInfo.content[0]
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {

					console.log(result.data)
					
					this.content=result.data.res
                    uni.hideLoading()
				} else {
					uni.hideLoading()
					
					this.$sun.toast(result.message, 'none')
				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;
					uni.hideLoading()
					

					uni.setStorageSync('user', result.data);


				} else {
					
					this.$sun.toast(result.message, 'none')
				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()
			},
			aiDubbing() {

			},

			navBack() {
				this.$sun.navBack()
			},
			async payNow() {
				if (!this.copyTypeInfo.name) {
					this.$sun.toast('请输入标题名称', 'none')
					console.log('请输入标题名称', 'none')
					return

				}

				if (this.copyTypeInfo.id) {
					this.$refs.serviceItemsPopup.close()

					this.$sun.navGo('/pagesA/creatCenter/realHotspots/HotspotsStepsOne?objs=' + encodeURIComponent(JSON
						.stringify(
							this.copyTypeInfo)))
				} else {
					console.log('新增')
					console.log(this.copyTypeInfo)
					this.$refs.serviceItemsPopup.close()
					uni.showLoading({
						title: '加载中...',
						mask: true
					});

					const result = await this.$http.post({
						url: this.$api.hotspotAnalysis,
						data: {
							uid: uni.getStorageSync("uid"),
							name: this.copyTypeInfo.name,
							keyword: this.copyTypeInfo.content[0],
							content:this.content
						}

					});
					if (result.errno == 0) {
						console.log(result.data)
						// this.$refs.serviceItemsPopup.close()

						this.$sun.navGo('/pagesA/creatCenter/realHotspots/HotspotsStepsOne?obj=' + encodeURIComponent(
							JSON
							.stringify({
								id: result.data.id,
								content: result.data.res

							})))

						uni.hideLoading()


					} else {
						uni.hideLoading()
						this.$sun.toast(result.message, 'none')
					}
				}
			},
			async but() {

				this.$refs.serviceItemsPopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});





			},
			async viewDetail() {

				const result = await this.$http.post({
					url: this.$api.hotspotNews,
					data: {
						uid: uni.getStorageSync("uid"),
						name: '',
						content: ''
					}

				});
				if (result.errno == 0) {
					console.log(result.data)

					this.tabList = result.data.map((item) => {
						return {
							id: item.id,
							name: item.name

						}
					})

					this.pid = this.tabList[0].id

					this.$nextTick(() => {
						this.mescroll.resetUpScroll();
					});




				} else {

					this.$sun.toast(result.message)
				}

			},
			paste(itme) {
				let ress = itme.replace(/\s+/g, ' ')
				uni.setClipboardData({
					data: ress,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制文案成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制文案失败',
							icon: 'error'
						});
					}
				});


			},


		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		.c-but {

			font-weight: 700;

			padding: 20rpx 40rpx;

			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 3%;
			border: none;

			z-index: 999;


			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, #6475FF, #7464FF 100%);
		}

		.Recommendations {
			padding: 30rpx 20rpx;
			width: 709rpx;
			// height: 195.74rpx;
			margin-top: 20rpx;

			border-radius: 20rpx;

			background: rgb(255, 255, 255);
		}

		.videoCopywriting {
			margin-top: 30rpx;


			box-sizing: border-box;
			border: 2rpx solid rgb(249, 249, 249);
			border-radius: 20rpx;
			padding: 20rpx;

			background: rgb(255, 255, 255);

			.copyImg {
				width: 50rpx;
				height: 50rpx;
			}

			.AiDubbing {

				width: 128rpx;
				height: 138.26rpx;
				border-radius: 12rpx;
				color: #7200FF;

				background: rgb(249, 248, 255);

				.aiDubbingImg {
					width: 45rpx;
					height: 45rpx;
				}
			}

		}
	}
</style>